<template>
    <div>
        <a-menu mode="horizontal">
            <a-menu-item v-for="(item, index) in routerdata" :key="index" @click="getrouter(item.path)">
                <a-icon type="main" /> {{ item.meta.title }} <!-- 假设 item 对象有一个 name 属性 -->
            </a-menu-item>
            <a-button style="float: right;" @click=" logout">退出</a-button>
        </a-menu>
        <!-- <div class="tui" style="float: right;">
            
        </div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            routerdata: [],
            userrole:''
        }
    },
    methods: {
        getrouter(path) {
            if (this.$route.path !== path) {
                this.$router.push(path);
            } else {
                this.$message.error('已在本页面，请勿重复点击');
            }
        },
        logout() {
    localStorage.removeItem('isLoggedIn');
    localStorage.removeItem('userRole');
    this.$router.push('/'); // 重定向到登录页面
    this.$message.success('已退出登录');
  }
        
    },
    mounted() {
        this.userrole = localStorage.getItem('userRole');
        if(this.userrole === '管理员'|| this.userrole === '超级管理员'){
            this.routerdata = this.$router.options.routes.slice(1,5);
        }
        else if(this.userrole === '前端'|| this.userrole === '平面'||this.userrole === 'Node全栈'||this.userrole === 'Plc设计开发'){

            this.routerdata = this.$router.options.routes.slice(1,4);
        }
        console.log(this.userrole);
        console.log(this.routerdata);
    }
}
</script>
<style scoped>
</style>